<html>
<head>
<title>TurKit Editor</title>
<link rel="stylesheet" href="jquery.treeview.css" />
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font-size:68.75%;
    font-family:Verdana,helvetica,arial,sans-serif;
}

iframe.editor {
	width: 100%;
	height: 100%;
}

.iconButton {
	position: absolute;
	left: 0px;
	top: 0px;
	cursor: pointer;
	width: 16px;
	height: 16px;
	z-index: 100;
}

.reloadButton {
	background-image: url('icons/reload_grey.png');
}

div.reloadButton:hover {
	background-image: url('icons/reload.png');
}
</style>
</head>
<body>
<script src="jquery.js"> </script>
<script src="tab.js"> </script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>
<script src="myutil.js"> </script>
<script>

___COMMON___

function positionButtons() {
    var leftMost = $(window).width()
    
    var viewer = $('#contents').get(0)    
	var isVerticalScrollbar = viewer.scrollHeight > viewer.clientHeight;
	if (isVerticalScrollbar) {
		leftMost -= 16
	}
    
    $('.reloadButton').css("left", (leftMost - 16) + "px")
}

function onResize() {
	positionButtons()
}

var oldValue = null
function reload(val) {
	if ((typeof val) == "string") {
		if (oldValue == null || val != oldValue) {
			oldValue = val
			$('#contents').empty().append(renderDB(val))
			onResize()
		}
	} else {
		cont = val
		if ((typeof cont) != "function") cont = function () {}

	    ajaxCont('/api', {
	        "method" : "getFile",
	        "file" : file.key
	    }, function (e) {
		    file = eval(e)
		    reload(file.contents)
		}, cont)
	}
}

function reloadPoll() {
	setTimeout(function () {
		reload(reloadPoll)
	}, 5000)
}

function renderDB(dbString) {
	var db
	var __db
	eval(dbString)
	
	var div = $('<div/>')
	function addFrames(frames) {
		var ul = $('<ul/>')
		foreach(frames, function (frame) {
			var li = $('<li/>')
			if (frame.url) {
				li.append('<span><a target="_blank" href="' + escapeXml(frame.url) + '">' + escapeXml(frame.name) + '</a></span>')
			} else {
				li.append('<span>' + escapeXml(frame.name) + '</span>')
			}
			if (frame.frames) {
				li.append(addFrames(frame.frames))
			}
			ul.append(li)
		})
		return ul
	}
	if (__db.crashAndRerun && __db.crashAndRerun.frames) {
		var tree = $(addFrames(__db.crashAndRerun.frames))
		tree.treeview({
			collapsed: true,
		})
		div.append(tree)
	} else {
		div.append('<i>no trace to display</i>')
	}	
	return div
}

$(function () {
	file = eval($('#file').val())
	
    reload(file.contents)
	reloadPoll()

	$(window).resize(onResize)
    $('.reloadButton').click(function () {
    	oldValue = null
        reload()
    })
})

</script>

<textarea style="display:none" id="file">___FILE___</textarea>
<div class="reloadButton iconButton"></div>
<div id="contents" style="width: 100%; height: 100%"></div>

</body>
</html>
